import React, { Component, createRef } from "react";

// 所谓的表单绑定，就是为了能够去得到input框的内容

// 受控组件：当表单控件添加了value属性和onChange事件后，自动认为是受控组件，让我们自己来控制表单控件
// 非受控组件：通过ref的方式来获取dom节点，并获得input的内容

// 官方推荐使用第一种(受控组件)
// 只有当是文件上传框的时候，推荐使用非受控组件
// 因为文件上传框的内容上传以后是只读的

class App extends Component {
  // state = {
  //   textValue: "abc",
  // };
  // // createRef的返回值是一个空的地址引用
  // ipt = createRef();
  constructor() {
    super();

    this.state = {
      textValue: "",
    };
    // createRef可以调用多次，用于一个页面有多个input需要做非受控组件的时候
    this.ipt = createRef();
    this.ipt2 = createRef();
  }

  handleChange = (event) => {
    this.setState({
      textValue: event.target.value,
    });
  };

  fn = () => {
    console.log(this.state.textValue);
  };

  fn2 = () => {
    // ipt是一个对象，current属性表示dom节点
    // 可以通过获取dom节点的方式来拿到input的内容
    console.log(this.ipt.current.value);
    console.log(this.ipt2.current.value);
  };

  render() {
    return (
      <>
        <h2>表单绑定</h2>

        <h4>受控组件</h4>
        <p>textValue: {this.state.textValue}</p>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange}
        />
        <button onClick={this.fn}>btn</button>

        <hr />

        <h4>非受控组件</h4>
        {/* 非受控组件如果想加默认值，需要加defaultValue属性 */}
        <input type="text" ref={this.ipt} defaultValue="123" />
        <input type="text" ref={this.ipt2} />
        <button onClick={this.fn2}>btn</button>

        <input type="file" />
      </>
    );
  }
}

export default App;
